<template>
	<view class="matchmain animated fadeIn faster">
		<view class="position-fixed w-100 z-index-100 pb-1" :style="{'paddingTop':$store.state.statusBarHeight+'px','backgroundColor':bgcolor}">
			<view class="d-flex d-flex-middle d-flex-between" :style="{'height': $store.state.titleBarHeight + 'px'}">
				<view class="pl-2" @click="goBack"><text class="iconfont icon-31fanhui1 font30 colorfff"></text></view>
				<view class="colorfff">王者荣耀</view>
				<text class="iconfont icon-31fanhui1 font30 colorfff vhiden"></text>
			</view>
		</view>
		<view :style="{paddingTop:$store.state.statusBarHeight+'px',height: $store.state.titleBarHeight + 'px'}"></view>
		<view class="d-flex d-flex-middle d-flex-between mt-3 mb-4">
			<view class="pl-2 d-flex d-flex-middle" @click="prev" style="height: 82rpx;">
				<text class="iconfont icon-left-circle colorfff"></text>
			</view>
			<swiper class="d-flex-item" :current="current" @change="swiperChange" circular style="height: 82rpx;">
				<swiper-item v-for="(avalist,aindex) in avatarList" :key="aindex">
					<view class="d-flex-item d-flex d-flex-middle d-flex-between mx-2">
						<image class="avatarImg" :class="{'avatarImgCur':avaIndex == 0}" v-for="(avatar,avaIndex) in avalist" :key="avatar.id" :src="avatar.img" style="width: 70rpx;height: 70rpx;border-radius: 20rpx;"></image>
					</view>
				</swiper-item>
			</swiper>
			<view class="pr-2 d-flex d-flex-middle" @click="next" style="height: 82rpx;">
				<text class="iconfont icon-right-circle-copy colorfff"></text>
			</view>
		</view>
		<view class="d-flex d-flex-center mb-8">
			<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/starmove.png" mode="widthFix" style="width: 580rpx;"></image>
		</view>
		<view class="d-flex d-flex-center mb-7">
			<text class="colorfff">当前</text>
			<text class="colorman">1197256</text>
			<text class="colorfff">人在线</text>
		</view>
		<view class="d-flex d-flex-center d-flex-middle mb-5">
			<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/encard.png" mode="widthFix" style="width: 230rpx;"></image>
			<text class="colorfff">同城卡/加速卡/定位卡</text>
		</view>
		<view class="px-2 d-flex d-flex-between pb-5">
			<view class="left-bg" @click="gotoChoseDazi">
				<view class="font30 colorfff mb-1">灵魂匹配</view>
				<view class="bg-fff rounded30 d-flex d-flex-center d-flex-middle colorman font20" style="width: 120rpx;height: 40rpx;">开始匹配</view>
			</view>
			<view class="right-bg d-flex d-flex-column d-flex-between">
				<view class="right-up d-flex d-flex-between" @click="openFilterPopup('center')">
					<view class="d-flex d-flex-column d-flex-between">
						<text class="font30 colorfff">刷选类别</text>
						<text class="iconfont icon-youjiantou-tianchong colorfff font30"></text>
					</view>
					<view class="d-flex d-flex-bottom pr">
						<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/team2211.png" mode="widthFix" style="width: 120rpx"></image>
					</view>
				</view>
				<view class="right-down d-flex d-flex-between" @click="gotoDaziCard">
					<view class="d-flex d-flex-column d-flex-between">
						<text class="font30 colorfff">功能卡</text>
						<text class="iconfont icon-youjiantou-tianchong colorfff font30"></text>
					</view>
					<view class="d-flex d-flex-bottom pr-3">
						<image src="https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/team2223.png" mode="widthFix" style="width: 66rpx"></image>
					</view>
				</view>
			</view>
		</view>
		<view class="position-absolute" style="right: 0; top: 280rpx;" @click="gotoDaziBell">
			<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%201551%402x.png" style="width: 130rpx; height: 130rpx;"></image>
		</view>
		<uni-popup ref="FilterPopup" background-color="#fff" border-radius="16px 16px 16px 16px">
			<view class="popup-content p-2" :class="{ 'popup-height': type === 'left' || type === 'right' }">
				<view class="title font34 text-center mb-5 mt-1 font-bold">筛选</view>
				<view class="comtitle bg-f5 p-2 rounded30">
					<view class="title row d-flex-between mb-2">
						<text class="font30 font-bold">搭子类型</text>
						<view class="btn row">
							<text style="color: #9D9D9E; margin-right: 4rpx; vertical-align: bottom;" class="font22">展开</text>
							<view class="icon d-flex d-flex-middle" style="margin-bottom: 4rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202883%403x.png" style="width: 25rpx; height: 25rpx;"></image>
							</view>
						</view>
					</view>
					<view class="optItem d-flex d-flex-between">
						<view class="item text-center font24 py-1 optcurrentstyle rounded40 px-1" style="border: 1px solid #e0e1e1; width: 20%;">有趣灵魂</view>
						<view class="item text-center font24 py-1 rounded40 px-1" v-for="i in 3" :key="i.id" style="border: 1px solid #e0e1e1; width: 20%;">人皮话多</view>
					</view>
				</view>
				<view class="comtitle bg-f5 p-2 mt-2 rounded30">
					<view class="title row d-flex-between mb-2">
						<text class="font30 font-bold">区服</text>
						<view class="btn row">
							<text style="color: #9D9D9E; margin-right: 4rpx; vertical-align: bottom;" class="font22">展开</text>
							<view class="icon d-flex d-flex-middle" style="margin-bottom: 4rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202883%403x.png" style="width: 25rpx; height: 25rpx;"></image>
							</view>
						</view>
					</view>
					<view class="optItem d-flex d-flex-start">
						<view class="item text-center font24 py-1 rounded40 px-1" style="border: 1px solid #e0e1e1; width: 20%; margin-right: 10rpx;">QQ区</view>
						<view class="item text-center font24 py-1 rounded40 px-1" style="border: 1px solid #e0e1e1; width: 20%;">微信区</view>
					</view>
				</view>
				<view class="comtitle bg-f5 p-2 mt-2 rounded30">
					<view class="title row d-flex-between mb-2">
						<text class="font30 font-bold">段位</text>
						<view class="btn row">
							<text style="color: #9D9D9E; margin-right: 4rpx; vertical-align: bottom;" class="font22">展开</text>
							<view class="icon d-flex d-flex-middle" style="margin-bottom: 4rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202883%403x.png" style="width: 25rpx; height: 25rpx;"></image>
							</view>
						</view>
					</view>
					<view class="optItem d-flex d-flex-between">
						<view class="item text-center font24 py-1 rounded40 px-1" v-for="i in 4" :key="i.id" style="border: 1px solid #e0e1e1; width: 20%;">青铜</view>
					</view>
				</view>
				<view class="comtitle bg-f5 p-2 mt-2 rounded30">
					<view class="title row d-flex-between mb-2">
						<text class="font30 font-bold">在线时间</text>
						<view class="btn row">
							<text style="color: #9D9D9E; margin-right: 4rpx; vertical-align: bottom;" class="font22">展开</text>
							<view class="icon d-flex d-flex-middle" style="margin-bottom: 4rpx;">
								<image src="https://yuexiaoda-1314351529.cos.ap-shanghai.myqcloud.com/app/%E7%BB%84%202883%403x.png" style="width: 25rpx; height: 25rpx;"></image>
							</view>
						</view>
					</view>
					<view class="optItem d-flex d-flex-between">
						<view class="item text-center font24 py-1 rounded40 px-1" v-for="i in 4" :key="i.id" style="border: 1px solid #e0e1e1; width: 20%;">随时有空</view>
					</view>
				</view>
				<view class="FilterPopup-btn d-flex d-flex-between mt-6">
					<view class="reset font32 py-2 rounded50 span-9 text-center" style="background-color: #F3F5FA;">重置</view>
					<view class="confirm font32 py-2 rounded50 span-9 text-center" style="background: linear-gradient(to right, #249CFF, #274BFF); color: #fff;" @click="closeFilterPopup">确定</view>
				</view>
			</view>      
		</uni-popup>
	</view>
</template>

<script>
	import { manner } from "@/util/manner.js";
	export default {
		data() {
			return {
				bgcolor:'transparent',
				current:0,
				avatarList:[
					[
						{
							id:'1',
							img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png'
						},{
							id:'2',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png'
						},{
							id:'3',
							img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png'
						},{
							id:'4',
							img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png'
						},{
							id:'5',
							img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png'
						},{
							id:'6',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg'
						},{
							id:'7',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png'
						}
					],
					[
						{
							id:'8',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png'
						},{
							id:'9',
							img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png'
						},{
							id:'10',
							img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png'
						},{
							id:'11',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg'
						},{
							id:'12',
							img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png'
						},{
							id:'13',
							img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png'
						},{
							id:'14',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png'
						}
					],
					[
						{
							id:'15',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/7e0ffc4fc660dfad28d7f377a684589f/7e0ffc4fc660dfad28d7f377a684589f.png'
						},{
							id:'16',
							img:'https://gp-open-platform.cdn.bcebos.com/204407191619/7ab388e6baf921096b7a414e38f6ee40/gp-open-platform/upload/file/img/256771a610177f2695d7d5c94d6b05cc.png'
						},{
							id:'17',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/img/ed39ad04e7655cbea70fe406f70a7fe8/ed39ad04e7655cbea70fe406f70a7fe8.png'
						},{
							id:'18',
							img:'https://gdown.baidu.com/appcenter/source/1396538632/cb06b8d26ddda8c0f792a0dc5a65b6e8/res/mipmap-xxxhdpi-v4/app_icon.png'
						},{
							id:'19',
							img:'https://gp-open-platform.cdn.bcebos.com/204404240735/c5aa61d3b0332610c536720deb6d6d45/gp-open-platform/upload/file/img/2cd090351808d067084bb98bbca58a2b.png'
						},{
							id:'20',
							img:'https://gameplus-platform.cdn.bcebos.com/gameplus-platform/upload/file/source/9bd4a29b16e16da2aa4f60fcb2a46f20.jpeg'
						},{
							id:'21',
							img:'https://gp-dev.cdn.bcebos.com/gp-dev/upload/file/source/5652440e6d12b379395e0eccfb7f9452.png'
						}
					]
				],
			}
		},
		onPageScroll(e) {
			let scrollTop = e.scrollTop
			if (scrollTop > 10) {
				this.bgcolor = '#191635'
			}else{
				this.bgcolor = 'transparent'
			}
		},
		methods: {
			goBack(){
				manner.goBack()
			},
			swiperChange(e){
				this.current = e.detail.current;
			},
			openFilterPopup(type) {
				this.type = type
				this.$refs.FilterPopup.open(type)
			},
			closeFilterPopup() {
				this.$refs.FilterPopup.close()
			},
			gotoDaziBell() {
				uni.navigateTo({
					url:'/pagesMain/star-daziBell/star-daziBell'
				})
			},
			gotoDaziCard() {
				uni.navigateTo({
					url:'/pagesMain/star-DaziCard/star-DaziCard'
				})
			},
			gotoChoseDazi() {
				uni.navigateTo({
					url:'/pagesMain/chose-dazi/chose-dazi'
				})
			},
			prev() {
				if (this.current > 0) {
					this.current -= 1;
				}else{
					this.current = 2
				}
			},
			next() {
				if (this.current < 2) {
					this.current += 1;
				}else{
					this.current = 0
				}
			},
		}
	}
</script>

<style scoped s>
.matchmain{
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/machbg.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
	min-height: 100vh;
}
.avatarImg{
	border-style: solid;
	border-width: 6rpx;
	border-color: transparent;
}
.avatarImgCur{
	border-color: #e65fd0;
}
.colorman{
	color:#5db0fe
}
.left-bg{
	width: 283rpx;
	height: 244rpx;
	padding: 20rpx 30rpx;
	background-image: url('https://168809.oss-cn-hangzhou.aliyuncs.com/community/temp/team3410.png');
	background-repeat: no-repeat;
	background-size: cover;
	background-position: 0 100%;
}
.right-bg{
	width: 341rpx;
	height: 284rpx;
}
.right-up{
	padding-left: 30rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	width: 311rpx;
	height: 94rpx;
	background: linear-gradient( 90deg, #5DB0FE 1%, #86F5C9 100%);
	border-radius: 30rpx;
}
.right-down{
	padding-left: 30rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	width: 311rpx;
	height: 94rpx;
	background: linear-gradient( 90deg, #D951C6 1%, #FB9AB0 100%);
	border-radius: 30rpx;
}
.uni-popup__wrapper {
	border-radius: 50rpx !important;
}
.popup-content {
	width: 720rpx;
	margin: 0 atuo;
	box-sizing: border-box;
}
.popup-content .optItem:last-child{
	margin-right: 0;
}
.optcurrentstyle {
	border: 1px solid #46C4FF;
	background-color: #cff0fb;
	color: #46C4FF;
}
</style>
